<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		#item{
			margin-left: 10px;
			border: 2px solid red;
			border-radius: 20px;
			padding: 20px;
		}
	</style>
	<body>
		<div id="app">
			<product :data="products"></product>
		</div>
		<template id='template'>
			<div style="margin-top: 30px;">
				<span @click="item.count++" id="item" v-for="item in data">
					{{item.name}}---销量：{{item.count}}
				</span>
			</div>

		</template>
	</body>
</html>
<script type="text/javascript">
	Vue.component('product',{
		template:'#template',
		props:['data'],

	})

	new Vue({
		el:'#app',
		data:{
			products:[
				{name:'洗衣机',count:0},
				{name:'洗碗机',count:0},
				{name:'扫地机',count:0},
				{name:'电视机',count:0},

			]
		}
	})
</script>
